<template>
  <!-- <h2>前台首页</h2> -->
  <div class="home">
  <div class="banner wrap">
    <img src="../assets/img/banner.f559b49d.png" alt="" />
  </div>
  <div class="content">
    <div class="wrap">
        <JfTitle title1="精品推荐" :imgSrc="getImg('jingpin.png')"></JfTitle>
        <List :arr="jingpinArr" :maxLenght="4"></List>
        <JfTitle title1="热门兑换" :imgSrc="getImg('hot.png')"></JfTitle>
      <img
        style="margin: 10px 0 30px 0"
        src="../assets/img/ad.4c6b6225.png"
        alt=""
      />
      <!-- HomeList组件 -->
    </div>
  </div>

  <div class="wrap">
        
        <List :arr="remenArr" :maxLenght="4"></List>
        
      
      <!-- HomeList组件 -->
    </div>

  <div class="wrap">
    <JfTitle title1="积分攻略"></JfTitle>
    <ul class="jifen">
      <li :style="{ backgroundImage: `url(${getImg('integral-01.9386d4bf.png')})`}" >
        <h3>签到得鸡腿</h3>
        <div>去签到</div>
      </li>
      <li :style="{ backgroundImage: `url(${getImg('integral-02.150d92a1.png')})`}">
        <h3>购课得鸡腿</h3>
        <div>去购课</div>
      </li>
      <li :style="{ backgroundImage: `url(${getImg('integral-03.9870f3f1.png')})`}">
        <h3>推荐得鸡腿</h3>
        <div>去推荐</div>
      </li>
      <li :style="{ backgroundImage: `url(${getImg('integral-04.afadcbdf.png')})`}">
        <h3>做任务得鸡腿</h3>
        <div>做任务</div>
      </li>
    </ul> 
  </div>
</div>

</template>


<script setup>

import { JingPinAPI } from '@/api/manager.js';
import { ReMenAPI } from '@/api/manager.js';

import { ref } from 'vue';

let jingpinArr = ref([]);
let remenArr = ref([]);

const getImg = name => {
  // Vue3 + Vite中引入静态资源的方法
  return new URL(`../assets/img/${name}`, import.meta.url).href;
}
/*
  在setup中使用async/await
  1. 在setup中使用async/await，需要在setup函数前加上async关键字
  但是  如果使用了setup语法糖 那么就不需要加async关键字
  因为默认会把setup变成async setup 所以可以直接使用await  
*/ 
let jingpinRes = await JingPinAPI()
let remenRes = await ReMenAPI()

// console.log(jingpinRes)

jingpinArr.value = jingpinRes.data.data.records;
remenArr.value = remenRes.data.data.records;

// console.log(jingpinArr.value)

</script>

<style lang="less" scoped>

.banner {
padding-bottom: 30px;
}
.content {
background-color: #f5f5f5;
padding-bottom: 30px;
}
.jifen {
display: flex;
justify-content: space-between;
padding-bottom: 30px;
li {
  width: 285px;
  height: 168px;
  color: #fff;
  padding: 20px 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-size 0.4s linear;
  background-size: 100% 100%;
  &:hover {
    background-size: 105% 105%;
  }
  h3 {
    font-size: 24px;
    margin-bottom: 19px;
  }
  div {
    width: 96px;
    height: 27px;
    border: 1px solid #ffffff;
    text-align: center;
    line-height: 27px;
  }
}
}
</style>